<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
	name="viewport"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="../css/index.css" />
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css" />
</head>

<body>
	<!-- 账户主要表格 -->
	<div class="account-box">
		<h2 class="account-title">
			<span class="left c3">日程表</span> 
			<a href="/weixiu3" style="padding-top:5px"><i class="el-icon-back"></i></a>
			<a href="###" class="f-btn-fhby right">返回本月</a>
				
			<div class="clearfix right">
				<div class="f-btn-jian left">&lt;</div>
				<div class="left f-riqi">
					<span class="f-year">2017</span>年<span class="f-month">1</span>月
				</div>
				<div class="f-btn-jia left">&gt;</div>
				<!-- 一定不能换行-->
			</div>
		</h2>
		<div class="f-rili-table">
			<div class="f-rili-head celarfix">
				<div class="f-rili-th">周日</div>
				<div class="f-rili-th">周一</div>
				<div class="f-rili-th">周二</div>
				<div class="f-rili-th">周三</div>
				<div class="f-rili-th">周四</div>
				<div class="f-rili-th">周五</div>
				<div class="f-rili-th">周六</div>
				<div class="clear"></div>
			</div>
			<div class="f-tbody clearfix"></div>
		</div>
	</div>
</body>
<script>
$(function(){
                //页面加载初始化年月
                var mydate = new Date();
                $(".f-year").html( mydate.getFullYear() );
                $(".f-month").html( mydate.getMonth()+1 );
                showDate(mydate.getFullYear(),mydate.getMonth()+1);
                //日历上一月
                $(".f-btn-jian ").click(function(){
                    var mm = parseInt($(".f-month").html());
                    var yy = parseInt($(".f-year").html());
                    if( mm == 1){//返回12月
                        $(".f-year").html(yy-1);
                        $(".f-month").html(12);
                        showDate(yy-1,12);
                    }else{//上一月
                        $(".f-month").html(mm-1);
                        showDate(yy,mm-1);
                    }
                })
                //日历下一月
                $(".f-btn-jia").click(function(){
                    var mm = parseInt($(".f-month").html());
                    var yy = parseInt($(".f-year").html());
                    if( mm == 12){//返回12月
                        $(".f-year").html(yy+1);
                        $(".f-month").html(1);
                        showDate(yy+1,1);
                    }else{//上一月
                        $(".f-month").html(mm+1);
                        showDate(yy,mm+1);
                    }
                })
                //返回本月
                $(".f-btn-fhby").click(function(){
                    $(".f-year").html( mydate.getFullYear() );
                    $(".f-month").html( mydate.getMonth()+1 );
                    showDate(mydate.getFullYear(),mydate.getMonth()+1);
                })
                
                //读取年月写入日历  重点算法!!!!!!!!!!!
                function showDate(yyyy,mm){
                    var dd = new Date(parseInt(yyyy),parseInt(mm), 0);   //Wed Mar 31 00:00:00 UTC+0800 2010  
                    var daysCount = dd.getDate();            //本月天数  
                    var mystr ="";//写入代码
                    var icon = "";//图标代码
                    var today = new Date().getDate(); //今天几号  21
                    var monthstart = new Date(parseInt(yyyy)+"/"+parseInt(mm)+"/1").getDay()//本月1日周几  
                    var lastMonth; //上一月天数
                    var nextMounth//下一月天数
                    if(  parseInt(mm) ==1 ){
                        lastMonth = new Date(parseInt(yyyy)-1,parseInt(12), 0).getDate();
                    }else{
                        lastMonth = new Date(parseInt(yyyy),parseInt(mm)-1, 0).getDate();
                    }
                    if( parseInt(mm) ==12 ){
                        nextMounth = new Date(parseInt(yyyy)+1,parseInt(1), 0).getDate();
                    }else{
                        nextMounth = new Date(parseInt(yyyy),parseInt(mm)+1, 0).getDate();
                    }
                    //计算上月空格数
                    for(j=monthstart;j>0;j--){
                        mystr += "<div class='f-td f-null f-lastMonth' style='color:#ccc;'>"+(lastMonth-j+1)+"</div>";
                    }
                    
                    //本月单元格
                    for(i=0;i<daysCount;i++){
                         //这里为一个单元格，添加内容在此
                        mystr += "<div class='f-td f-number'><span class='f-day'>"+(i+1)+"</span>"
                                +"<div class='f-yuan'></div>"
                                //悬浮窗内容
                                +"<div class='f-table-msg'></div>"//这里加判断
                                +"</div>"; 
                    }
                    
                    //计算下月空格数
                    for(k=0; k<42-(daysCount+monthstart);k++ ){//表格保持等高6行42个单元格
                        mystr += "<div class='f-td f-null f-nextMounth' style='color:#ccc;'>"+(k+1)+"</div>";
                    }
                     
                    
                    
                    //写入日历
                    $(".f-rili-table .f-tbody").html(mystr);
                    //给今日加class
                    if( mydate.getFullYear() == yyyy){
                        if( (mydate.getMonth()+1 ) == mm){
                            var today = mydate.getDate();
                            var lastNum = $(".f-lastMonth").length;
                            $(".f-rili-table .f-td").eq(today+lastNum-1).addClass("f-today");
                        }
                    }
                    //绑定选择方法
                    $(".f-rili-table .f-number").off("click");
                    $(".f-rili-table .f-number").on("click",function(){
                        $(".f-rili-table .f-number").removeClass("f-on");
                        $(this).addClass("f-on");
                    });
                    
                    //绑定查看方法
                    $(".f-yuan").off("mouseover");
                    
                   	//查看当天的维修单
                    $(".f-yuan").on("mouseover",function(){
                    	var ss = $(this);
                    	var value = $(this).prev().text();
                    	var year = $(".f-year").html();
                      	var month =   $(".f-month").html();
                      	var time = year+"-"+month+"-"+value;
						bb(time,ss);
                    });
                   	
                   	
                   function bb(time,ss) {
                	   $.ajax({
                           type: "POST",
                           url: "/afterSale/weixiuTable",
                           data: {"time":time},
                           dataType: "json",
                           success: function(v){
                        	   
                        	   if(v.length > 0){
                        		   for(var i=0;i<v.length;i++){
                                    	 ss.parent().find(".f-table-msg").append("<h5><span class='major'>维修员："+v[i].use_name+"</span>&nbsp;&nbsp;<span class='major'>处理情况："+v[i].state+"</span></h5>");
                                    	 }
                       
                        	   }else{
                        		   ss.parent().find(".f-table-msg").append("<h5>今天没有需要维修的订单哟！！</h5>"); 
                        	   }
                                          
                        	   ss.parent().find(".f-table-msg").show();
                              // console.log(v);
                           }
                          	 
                       });
					
				}
                    	 
                    
                    $(".f-table-msg").off("mouseover");
                    $(".f-table-msg").on("mouseover",function(){
                        $(this).show();
                    });
                    $(".f-yuan").off("mouseleave");
                    $(".f-yuan").on("mouseleave",function(){
                    	 $(this).parent().find(".f-table-msg").html("");
                        $(this).parent().find(".f-table-msg").hide();
                    });
                    $(".f-table-msg").off("mouseleave");
                    $(".f-table-msg").on("mouseleave",function(){
                    	 $(this).html("");
                        $(this).hide();
                    });
                }
                
            })
</script>
</html>